<template>
  <div class="history">
      <ol>
        <li :class="chkedList===0?'chked':''" @click="chk(0)">
          <img src="../../assets/img/report_form_clicked.png" alt="" v-if="chkedList===0">
          <img src="../../assets/img/report_form.png" alt="" v-else>
        </li>
        <li :class="chkedList===1?'chked':''" @click="chk(1)">
          <img src="../../assets/img/line_chart_clicked.png" alt="" v-if="chkedList===1">
          <img src="../../assets/img/line_chart.png" alt="" v-else>
        </li>
      </ol>
      <Hash v-if="chkedList===0" />
      <LineChart v-else />
  </div>
</template>

<script>
import LineChart from './lineChart.vue';
import Hash from './historyHash.vue';
export default {
  components:{
    LineChart,
    Hash
  },
  data(){
    return{
      chkedList:0
    }
  },
  methods:{
    chk(index){
      this.chkedList = index
    }
  }
}
</script>

<style lang="scss" scoped>
.history{
  >ol{
    height: .33rem;
    width: 1.48rem;
    display: flex;
    margin: .2rem auto;
    background: rgba(68, 95, 116, .2);
    border-radius: .033rem;
    overflow: hidden;
    li{
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    >li.chked{
      background: linear-gradient(to right,#FFDC3B 0%,#FFC433 100%);
    }
    >li:nth-of-type(1){
      img{
        height: .213rem;
        width: .226rem;
      }
    }
    >li:nth-of-type(2){
      img{
        height: .233rem;
        width: .21rem;
      }
    }
  }
}
</style>